<template>
	<view class="sys_artDet">
		<view class="title">{{form.saName}}</view>
		<view style="margin-bottom: 40rpx;" class="time">{{form.saCreatetime}}</view>

		<block v-for="(videoItem, index) in videoItems" :key="index">
			<video class="custom-video" controls :src="videoItem.src" preload="metadata"
				:poster="videoItem.poster || ''"></video>
		</block>

		<!-- <div class="htmls" v-html="form.saText"></div> -->

		<!-- 使用 rich-text 渲染处理过的富文本内容 -->
		<rich-text class="htmls" :nodes="processRichText(form.saText)"></rich-text>


		<view class="" v-if="isShow">
			<view class="sc" v-if="form.omSampuser == '' || form.omSampuser == null" @click="collect()">
				<image src="@/static/icons/aaaa2.png" mode=""></image>收藏
			</view>
			<view v-else class="sc" @click="uncollect()">
				<image src="@/static/icons/aaaa3.png" mode=""></image>取消收藏
			</view>
		</view>
		<!-- <view class="fx" @click="fxArt()">
			<image src="@/static/icons/aaaa1.png" mode=""></image>分享
		</view> -->
		<button v-if="isShow" open-type="share" class="fx">
			<image src="@/static/icons/aaaa1.png" mode=""></image>分享
		</button>
	</view>
</template>

<script>
	import {
		sainfo,
		collect,
		uncollect
	} from '@/api/pagesApi/index.js'
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	export default {
		data() {
			return {
				form: {},
				baseURLImgUPD: '',
				id: null,

				videoItems: [],

				processedContent: '',

				isShow: true,
			}
		},
		onLoad(opt) {
			console.log(11111111111, opt)
			this.baseURLImgUPD = baseURLShowImgUP.baseURLShowImgUP;
			if (opt.id) {
				this.id = opt.id
				this.getDet()
			}
			if (opt.FXid) {
				this.isShow = false
				this.id = opt.FXid
				this.getDet()
			}
		},
		methods: {
			extractVideosFromRichText(htmlString) {
				// 使用正则表达式匹配 video 标签
				const videoRegex = /<video[^>]+src="([^">]+)"[^>]*>/g;
				let match;
				const videoItems = [];

				while ((match = videoRegex.exec(htmlString)) !== null) {
					const src = match[1];
					const posterMatch = htmlString.substring(match.index).match(/poster="([^">]*)"/);
					const poster = posterMatch ? posterMatch[1] : undefined;

					if (src) {
						videoItems.push({
							src: src,
							poster: poster
						});
					}
				}

				this.videoItems = videoItems;
			},
			// processRichText(htmlString) {
			// 	// 使用正则表达式找到所有的 img 标签，并为其添加特定的类名
			// 	const processedHtml = htmlString.replace(/<img([^>]+)>/gi, (match, p1) => {
			// 		// 添加一个特定的类名到 img 标签
			// 		return `<img${p1} class="custom-img" />`;
			// 	});

			// 	this.processedContent = processedHtml;
			// },
			getDet() {
				sainfo({
					said: this.id,
				}).then(res => {
					console.log(res)
					this.form = res.data.data
					// 解析富文本内容中的视频标签
					this.extractVideosFromRichText(this.form.saText);
					// this.processRichText(this.form.saText);
				})
			},
			collect() {
				if (!wx.getStorageSync('wzUid')) {
					uni.showToast({
						icon: 'none',
						title: '您还未登录，请先登录'
					})
					return
				}
				collect({
					sampuserSaid: this.form.saId,
					sampuserMpuid: wx.getStorageSync('wzUid'),
					sampuserOpenid: wx.getStorageSync('wzOpenid')
				}).then(res => {
					this.getDet()
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},
			uncollect() {
				if (!wx.getStorageSync('wzUid')) {
					uni.showToast({
						icon: 'none',
						title: '您还未登录，请先登录'
					})
					return
				}
				uncollect({
					sampuserSaid: this.form.saId,
					sampuserMpuid: wx.getStorageSync('wzUid'),
					sampuserOpenid: wx.getStorageSync('wzOpenid')
				}).then(res => {
					this.getDet()
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},
			// 处理富文本内容
			processRichText(html) {
			  // 处理图片
			  html = html
			    .replace(/<img/gi, '<img style="max-width:100% !important;height:auto !important;display:block;margin:0 auto;"')
			    .replace(/width=".*?"/gi, '')  // 删除 width 属性
			    .replace(/height=".*?"/gi, ''); // 删除 height 属性
			
			  // 处理视频（修复 poster="undefined"）
			  html = html
			    .replace(/poster="undefined"/gi, '')  // 删除无效 poster
			    .replace(/<video/gi, '<video style="width:100% !important;height:auto !important;"');
			
			  return html;
			}
		},
		onShareAppMessage(res) {
			console.log(res)
			if (res.from === "button") {
				console.log("来自页面内分享按钮");
			}
			return {
				title: this.form.saName, // 分享标题
				path: 'pages/article/detail?FXid=' + this.id, // 分享路径
				imageUrl: this.baseURLImgUPD + this.form.saImage, // 分享图片
				success: () => {
					console.log("分享成功");
				},
				fail: () => {
					console.log("分享失败");
				}
			};
		}
	}
</script>

<style scoped lang="scss">
	.htmls {
		width: 100%;
		margin-top: 40rpx;
		font-size: 32rpx;

		img {
			width: 100% !important;
			height: auto;
			display: block;
			/* 去除图片底部的间隙 */
		}

		image {
			width: 100% !important;
			height: auto;
			display: block;
			/* 去除图片底部的间隙 */
		}
	}

	.sys_artDet {
		width: calc(100% - 40rpx);
		min-height: calc(100vh - 60rpx);
		padding: 20rpx 20rpx 40rpx;
		background-color: #fff;
		color: #333;
		position: relative;
		overflow: hidden;

		.title {
			font-size: 36rpx;
			font-weight: 400;
			height: 80rpx;
			line-height: 80rpx;
		}

		.time {
			font-size: 24rpx;
			color: #9f9f9f;
		}


		.sc {
			position: fixed;
			right: 40rpx;
			bottom: 350rpx;
			color: #48C2B9;
			width: 110rpx;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			border: 1rpx solid #48C2B9;
			font-size: 24rpx;
			background-color: #fff;

			image {
				width: 42rpx !important;
				height: 42rpx !important;
			}
		}

		.fx {
			position: fixed;
			right: 40rpx;
			bottom: 210rpx;
			color: #48C2B9;
			width: 110rpx;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			border: 1rpx solid #48C2B9;
			font-size: 24rpx;
			background-color: #fff;

			image {
				width: 36rpx !important;
				height: 36rpx !important;
			}
		}
	}
	
	// .htmls {
	// 	max-width: 100% !important;
	// 	p{
	// 		max-width: 100% !important;
	// 	}
	// 	img{
	// 		max-width: 100% !important;
	// 		/* 限制图片最大宽度为父容器宽度 */
	// 		height: auto !important;
	// 		/* 高度自动适应 */
	// 		display: block;
	// 		/* 消除图片底部间隙 */
	// 		margin: 0 auto;
	// 		/* 居中显示（可选） */
	// 	}
	// }
	
</style>
<style scoped>
	::v-deep img {
	  max-width: 100% !important;
	  height: auto !important;
	  display: block;
	  margin: 0 auto;
	}
	
	/* 修复视频高度塌陷 */
	::v-deep .ql-video {
	  width: 100% !important;
	}
</style>